<template>
  <div class="tableContainer">
    <table ref="table" border="1" style="border-color:#173c61">
      <thead>
        <tr>
          <th style="position: relative; z-index: 2" class="cell order" :style="headerStyle">
            <!-- 序号 -->
          </th>
          <th
            style="position: relative; z-index: 2"
            class="cell"
            :style="{ width: col.width,...headerStyle }"
            v-for="(col, index) of columns"
            :key="index + '-' + col.key"
          >
            {{ col.title }}
          </th>
        </tr>
      </thead>
      <tbody ref="tbody" >
        <tr

          :class="[stripeRow(rowIndex)]"
          v-for="(row, rowIndex) of rows"
          :key="rowIndex"
        >
          <td style="position: relative; z-index: 1" v-if="row.ID" class="cell order">
            {{ row.ID  }}
          </td>
          <template v-for="(col, index) of columns">
            <td
              style="position: relative; z-index: 1"
              class="cell"
              :style="{ width: col.width, ...col.style }"
              v-if="col.useHtmlSting"
              v-html="row[col.key]"
              :key="rowIndex + '-' + index + '-' + col.key"
            ></td>

            <td
              style="position: relative; z-index: 1"
              :style="{ width: col.width, ...col.style }"
              v-else
              class="cell"
              :key="rowIndex + '-' + index + '-' + col.key"
            >
              {{ row[col.key] }}
            </td>
          </template>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    columns: {
      type: Array,
      default: () => []
    },
    rows: {
      type: Array,
      default: () => []
    },
    headerStyle: {
      type: Object,
      default: () => {}
    },
    start:{
      type:Boolean,
      default:true
    }
  },
  data () {
    return {
      animate: false,
      intnum: null
    }
  },
  computed: {},
  created () {},
  mounted () {
    if(this.start){
      this.startAnimate()
    }
  },
  watch: {
    animate (v) {
      const tbody = this.$refs.tbody
      const move = tbody.offsetHeight / this.rows.length
      if (v) {
        tbody.style.transition = 'all 0.5s'
        tbody.style.transform = `translateY(-${move}px)`
      } else {
        tbody.style.transition = 'none'
        tbody.style.transform = 'translateY(0)'
      }
    }
  },
  beforeDestroy () {
    this.cleanup()
  },
  methods: {
    stripeRow (index) {
      if (index % 2 === 0) {
        return 'double-row'
      } else if (index % 2 === 1) {
        return 'single-row'
      }
      return ''
    },
    /**
     * 通过动态获取容器及数据源容器的高度来动态呈现数据源的滚动
     * @param oldTranslateY 已经移动的距离
     */
    cleanup () {
      if (this.intnum) {
        clearInterval(this.intnum)
        this.intnum = null
      }
    },
    startAnimate (oldTranslateY = 0) {
      this.intnum = setInterval(() => {
        this.animate = true
        setTimeout(() => {
          this.rows.push(this.rows[0])
          this.rows.shift()
          this.animate = false
        }, 1000)
        // this.$once('hook:beforeDestroy', () => {
        //   this.cleanup()
        // })
      }, 2000)
      // const tableHeight = this.$el.offsetHeight - 53
      // const tbody = this.$refs.tbody
      // const tbodyHeight = tbody.offsetHeight
      // const moveDistance = tbodyHeight - tableHeight
      // if (moveDistance <= 0) {
      //   // 容器足够装下元素时，不需要动画
      //   this.timer = setTimeout(() => {
      //     this.startAnimate()
      //   }, 5000)
      // } else if (oldTranslateY >= moveDistance) {
      //   // 到达容器底部时回滚
      //   this.timer = setTimeout(() => {
      //     tbody.style.transform = 'translateY(' + 0 + 'px)'
      //     this.startAnimate()
      //   }, 5000)
      // } else {
      //   this.timer = setTimeout(() => {
      //     const translateDistance = oldTranslateY + (tbodyHeight / this.rows.length)
      //     tbody.style.transform = 'translateY(-' + translateDistance + 'px)'
      //     this.startAnimate(translateDistance)
      //   }, 5000)
      // }
    }
  }
}
</script>
<style lang="scss" scoped>
@import "table.scss";
.tableContainer {
  height: 100%;
  overflow: hidden;
  font-size: 0.8vw;
}
.anim{
  transition: all 0.5s;
}
table {
  width: 100%;
  border-spacing: 0px;
  table-layout: fixed;
  overflow: hidden;
  font-size: 12px;
  thead {
    position: relative;
    z-index: 10;
    tr th {
      position: relative;
      z-index: 10;
      padding-bottom: 6px;
      line-height: 16px;
      font-weight: normal;
      border-bottom: 1px solid rgba(106, 242, 255, 0.35);
    }
  }
  tbody {
    position: relative;
    z-index: 1;
    // transition: 1.5s linear;
    overflow: hidden;
    tr {
      // position: relative;
      z-index: 15;
    }
  }
  th {
    text-align: left;
    color: $color-normal;
  }
  .single-row {
    color: $color-normal;
  }
  .double-row {
    color: $color-light;
  }
  .cell {
    text-align: left;
    width: 100%;
    word-break: keep-all; /* 不换行 */
    white-space: nowrap; /* 不换行 */
    overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
    text-align: center;
    text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用*/
  }
  td.cell {
    color: #d8fcff;
    padding-top: 12px;
    // &:last-child{
    //   color: #00ffea;
    // }
  }
  .cell.order {
    // width: 30px;
    min-width: 50px;
    text-align: center;
  }
}
</style>
